<template>
  <div>
    <image class="detail-img" :src="points_mall_product.picture_url" />
    <div style="padding: 10px;border-bottom: 1px solid #EAEAEA">
      <div>{{points_mall_product.title}}</div>
      <div><span style="font-weight: bold;">{{points_mall_product.mall_points}}</span> 积分</div>
    </div>
    <div style="padding: 10px;">
      <div>商品简介</div>
      <div><span style="font-weight: bold;">积分说明：</span>每消费一元可以获得积分1分</div>
      <div><span style="font-weight: bold;">有效期：</span>即日起至2018年12月31日</div>
      <div><span style="font-weight: bold;">温馨提示：</span>积分一经兑换，不予退换！实物以门店实际贩卖为准！如此商品已兑换完，可兑换其他等同价位的商品！</div>
    </div>
    <div style="padding: 10px;">
      <div><span style="font-weight: bold;">可兑换门店：</span>moka品牌所有门店</div>
    </div>
    <div style="padding: 10px;">
      <div>此活动最终解释权归moka所有</div>
    </div>
    <div v-if="user.points < points_mall_product.mall_points" class="not-btn">积分不足</div>
    <div v-else class="btn" @click="exchange()">立即兑换</div>
  </div>
</template>
<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapGetters([
      'points_mall_product',
      'user'
    ])
  },
  beforeMount() {
    console.log('beforeMount')
    if (!this.user || !this.user.id) {
      // 用户未授权
      let url = 'get_user_info?callback_url=points_product_detail'
      wx.redirectTo({
        url: url
      })
      return
    }
  },
  async mounted () {

  },
  methods: {
    async exchange(){
      let form = {
        brand_id:this.user.brand_id,
        user_id:this.user.id,
        product_id:this.points_mall_product.id
      }
      let result = await api.exchangeProduct(form)
      if (result.code == 0) {
        wx.showToast({title: '积分兑换成功！',icon: 'none'})
        this.refreshUser()
        wx.redirectTo({url: '/pages/user/points_use_record'})
      }
    },
    refreshUser() {
      api.getUserByOpenid({
        openid: this.user.open_id
      }).then(res => {
        if (res.code == 0) {
          this.$store.dispatch('setUser', res.data)
        }
      })
    }
  }
}
</script>

<style scoped>
.detail-img{
  width: 100%;
  height: 180px;
}
.btn{
  width: 80%;
  background: black;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  margin-bottom: 15px;
  border-radius:20px;
  color: white;
  text-align: center;
}
.not-btn{
  width: 80%;
  background: #EAEAEA;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  margin-bottom: 15px;
  border-radius:20px;
  color: white;
  text-align: center;
}
</style>
